<template>
  <el-row style="margin: 5px 0px; height: 29px">
    <span
      style="
        vertical-align: middle;
        display: inline-block;
        padding-top: 2px;
        font-size: 13px;
      "
      >查询条件：</span
    >
    <el-tag
      style="margin: 0px 5px 5px 0px"
      v-for="tag in tags"
      :key="tag.prop || tag.start + '_' + tag.end"
      closable
      @close="removeTag(tag)"
    >
      {{ tag.desc }}：{{ tag.value }}
    </el-tag>
  </el-row>
  <el-form
    :inline="true"
    :model="query"
    label-width="70px"
    style="margin-bottom: 10px; position: relative; z-index: 100"
  >
    <el-row>
      <el-form-item
        label="计划月份"
        style="width: 170px"
        :style="elFormItemStyle"
      >
        <el-select v-model="query.plan_month" @change="getPage(1)">
          <el-option label="全部" value=""></el-option>
          <el-option
            :label="item"
            :value="item"
            v-for="item in yearMonthList"
            :key="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="计划状态"
        style="width: 160px"
        :style="elFormItemStyle"
      >
        <el-select v-model="query.plan_status" @change="getPage(1)">
          <el-option label="全部" value=""></el-option>
          <el-option label="未下达" :value="false"></el-option>
          <el-option label="已下达" :value="true"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="产品类型"
        style="width: 170px"
        :style="elFormItemStyle"
      >
        <el-select v-model="query.plan_type" @change="getPage(1)">
          <el-option label="全部" value=""></el-option>
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in ddo.prodTypes"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="计划编号"
        style="width: 200px"
        :style="elFormItemStyle"
      >
        <el-input v-model="query.plan_id"></el-input>
      </el-form-item>

      <el-form-item
        label="计划产量"
        style="width: 340px"
        :style="elFormItemStyle"
      >
        <el-col :span="11">
          <el-form-item style="width: 120px">
            <el-input-number
              v-model="query.plan_num_start"
              :min="0"
              :max="99999999"
              controls-position="right"
              :precision="0"
              :step="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="2" style="text-align: center">
          <span style="color: #cccccc"> - </span>
        </el-col>
        <el-col :span="11">
          <el-form-item style="width: 120px">
            <el-input-number
              v-model="query.plan_num_end"
              :min="0"
              :max="99999999"
              controls-position="right"
              :precision="0"
              :step="1"
            />
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item :style="elFormItemStyle">
        <el-button type="primary" @click="getPage(1)">查询</el-button>
      </el-form-item>

      <el-form-item v-show="queryMore" :style="elFormItemStyle">
        <el-tooltip effect="dark" content="简化" placement="top-start">
          <el-button :icon="Fold" circle @click="queryMore = false"></el-button>
        </el-tooltip>
      </el-form-item>
      <el-form-item v-show="!queryMore" :style="elFormItemStyle">
        <el-tooltip effect="dark" content="更多筛选" placement="top-start">
          <el-button
            :icon="Expand"
            circle
            @click="queryMore = true"
          ></el-button>
        </el-tooltip>
      </el-form-item>
    </el-row>

    <transition name="slide-fade">
      <div
        v-show="queryMore"
        style="
          position: absolute;
          top: 48px;
          left: 0px;
          background-color: white;
          box-shadow:0px 15px 15px 0px rgba(0,0,0,0.1);
          border-radius:5px;          
        "
      >
        <el-row>
          <el-form-item
            label="产品规格"
            style="width: 280px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.plan_std" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.info_name"
                :value="item.info_id"
                v-for="item in stdList"
                :key="item.info_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="产品花色"
            style="width: 268px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.plan_color" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.info_name"
                :value="item.info_id"
                v-for="item in colorList"
                :key="item.info_id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="产品客户"
            style="width: 280px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.plan_cus" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.info_name"
                :value="item.info_id"
                v-for="item in cusList"
                :key="item.info_id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="计划序号"
            style="width: 226px"
            :style="elFormItemStyle"
          >
            <el-col :span="11">
              <el-input
                style="width: 70px"
                v-model="query.plan_xh_start"
                type="number"
                min="1"
                max="9999"
              ></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <span style="color: #cccccc"> - </span>
            </el-col>
            <el-col :span="11">
              <el-input
                style="width: 70px"
                v-model="query.plan_xh_end"
                type="number"
                min="1"
                max="9999"
              ></el-input>
            </el-col>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item
            label="下达日期"
            style="width: 400px"
            :style="elFormItemStyle"
          >
            <el-col :span="11">
              <el-form-item style="width: 150px">
                <el-date-picker
                  v-model="query.plan_date_start"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="开始日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <span style="color: #cccccc"> - </span>
            </el-col>
            <el-col :span="11">
              <el-form-item style="width: 150px">
                <el-date-picker
                  v-model="query.plan_date_end"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item
            label="下达人"
            style="width: 150px"
            :style="elFormItemStyle"
          >
            <el-input v-model="query.plan_person"></el-input>
          </el-form-item>
        </el-row>
      </div>
    </transition>
  </el-form>

  <el-row style="margin-bottom: 10px">
    <el-button type="primary" @click="openAdd">新建计划</el-button>
    <el-button type="danger" @click="execMultiDel">删除</el-button>
  </el-row>

  <el-table
    :data="page.list"
    :stripe="true"
    :fit="true"
    :max-height="tableMaxHeight"
    style="width: 100%; flex: auto"
    @selection-change="handleSelectionChange"
  >
    <el-table-column fixed="left" type="selection" width="26" />
    <el-table-column fixed="left" prop="plan_id" label="编号" width="128" />
    <el-table-column
      fixed="left"
      prop="plan_month"
      label="计划月份"
      width="80"
    />
    <el-table-column prop="plan_type" label="产品类型" width="80">
      <template #default="{ row }">
        {{ ddo.text("prodTypes", row.plan_type) }}
      </template>
    </el-table-column>
    <el-table-column prop="cus_name" label="产品客户"  />
    <el-table-column prop="std_name" label="产品规格"  />
    <el-table-column prop="color_name" label="产品花色"  />
    <el-table-column prop="plan_num" label="产量(米)" width="80" />
    <el-table-column prop="plan_xh" label="序号" width="60" />

    <el-table-column fixed="left" prop="plan_status" label="状态" width="70">
      <template #default="{ row }">
        <span
          :style="{
            color: row.plan_status ? '#67C23A' : '#303133',
            fontWeight: 'bold',
          }"
          >{{ row.plan_status ? "已下达" : "未下达" }}</span
        >
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="260">
      <template #default="{ row }">
        <el-button v-if="!row.plan_status" size="small" @click="openEdit(row)"
          >编辑</el-button
        >
        <el-button
          v-if="!row.plan_status"
          size="small"
          type="danger"
          @click="execDel(row)"
          >删除</el-button
        >
        <el-button
          v-if="!row.plan_status"
          size="small"
          type="primary"
          @click="execConfirm(row)"
          >下达</el-button
        >

        <el-button size="small" type="primary" @click="openDetails(row)"
          >详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 22px"
    layout="sizes,prev, pager, next, jumper, ->, total"
    :total="page.total"
    v-model:page-size="query.pageSize"
    v-model:current-page="query.pageNum"
    :page-sizes="[1, 3, 5, 10, 15, 20, 30, 100]"
    @current-change="getPage"
    @size-change="getPage(1)"
  />

  <!-- 新增 -->
  <plan-add ref="planAddRef" @ok="getPage(page.last + 1)"></plan-add>

  <!-- 修改 -->
  <plan-upd ref="planUpdRef" @ok="getPage(page.current)"></plan-upd>

  <plan-details ref="planDetailsRef"></plan-details>
</template>

<script setup >
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { tip, get, post, put, del, ddo, elConfirm } from "@/common";
import { Expand, Fold } from "@element-plus/icons-vue";

const elFormItemStyle = { margin: "0px 16px 15px 0px" };

const tableMaxHeight = computed(() => ddo.homeElCardBodyHeight - 200);

const queryMore = ref(false);

//获取年月列表
const yearMonthList = ref({});
const getYearMonthData = () => {
  get("/plan/manager/year-month-list").then((result) => {
    yearMonthList.value = result.data.list;
    query.plan_month = result.data.nextYearMonth;
    getPage(1);
  });
};
getYearMonthData();

//获取基础信息
const infoList = ref([]);
const cusList = computed(() =>
  infoList.value.filter((item) => item.info_type === 1)
);
const stdList = computed(() =>
  infoList.value.filter((item) => item.info_type === 2)
);
const colorList = computed(() =>
  infoList.value.filter((item) => item.info_type === 3)
);
const getInfoList = () => {
  get("/plan/manager/info").then((result) => {
    infoList.value = result.data;
  });
};
getInfoList();

//多选处理
const multipleSelection = ref([]);
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
};

//获取列表数据
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  plan_id: "",
  plan_xh_start: 0,
  plan_xh_end: 0,
  plan_month: "", //计划月份
  plan_cus: "",
  plan_std: "",
  plan_color: "",
  plan_num_start: 0, //计划查询范围起始数量值
  plan_num_end: 0, //计划查询范围结束数量值
  plan_type: "", // 产品类型
  plan_date_start: "", //计划查询范围起始下达时间
  plan_date_end: "", //计划查询范围结束下达时间
  plan_person: "", //计划下达人
  plan_status: "", //计划是否下达
});

//条件标签元数据
const getInfoName = (propVal, someList) => {
  const theItem = someList.value.find((item) => item.info_id == propVal);
  return theItem && theItem.info_name;
};
const queryTagMeta = [
  { range: false, desc: "计划编号", prop: "plan_id" },
  { range: true, desc: "生产序号", start: "plan_xh_start", end: "plan_xh_end" },
  { range: false, desc: "计划月份", prop: "plan_month" },
  {
    range: false,
    desc: "产品客户",
    prop: "plan_cus",
    getValue: (propVal) => getInfoName(propVal, cusList),
  },
  {
    range: false,
    desc: "产品规格",
    prop: "plan_std",
    getValue: (propVal) => getInfoName(propVal, stdList),
  },
  {
    range: false,
    desc: "产品花色",
    prop: "plan_color",
    getValue: (propVal) => getInfoName(propVal, colorList),
  },
  {
    range: true,
    desc: "计划产量",
    start: "plan_num_start",
    end: "plan_num_end",
  },
  {
    range: false,
    desc: "产品类型",
    prop: "plan_type",
    getValue: (propVal) => ddo.text("prodTypes", propVal),
  },
  {
    range: true,
    desc: "下达日期",
    start: "plan_date_start",
    end: "plan_date_end",
  },
  { range: false, desc: "下达人", prop: "plan_person" },
  {
    range: false,
    desc: "是否下达",
    prop: "plan_status",
    getValue: (propVal) => (propVal ? "已下达" : "未下达"),
  },
];

//以选择条件标签
const tags = computed(() => {
  const arr = [];

  queryTagMeta.forEach((meta) => {
    if (meta.range) {
      (query[meta.start] || query[meta.end]) &&
        arr.push({
          ...meta,
          value: meta.getValue
            ? meta.getValue(query[meta.start], query[meta.end])
            : `${query[meta.start]} ~ ${query[meta.end]}`,
        });
    } else {
      (query[meta.prop] || query[meta.prop] === false) &&
        arr.push({
          ...meta,
          value: meta.getValue
            ? meta.getValue(query[meta.prop])
            : query[meta.prop],
        });
    }
  });
  return arr;
});

const removeTag = (tag) => {
  if (tag.range) {
    if (typeof query[tag.start] === "number") {
      query[tag.start] = 0;
      query[tag.end] = 0;
    } else {
      query[tag.start] = "";
      query[tag.end] = "";
    }
  } else {
    if (typeof query[tag.start] === "number") {
      query[tag.prop] = 0;
    } else {
      query[tag.prop] = "";
    }
  }
  getPage(1);
};

const page = ref({ total: 0 });

const getPage = (pageNo) => {
  query.pageNum = pageNo || 1;
  get("/plan/manager", query).then((result) => {
    page.value = result.data;
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
  });
};



//新增
import PlanAdd from "./plan-add.vue";
const planAddRef = ref();
const openAdd = () => {
  planAddRef.value.open();
};

//修改
import PlanUpd from "./plan-upd.vue";
const planUpdRef = ref();
const openEdit = (row) => {
  planUpdRef.value.open(row);
};

//删除
const execDel = (row) => {
  elConfirm("提示", "您确定删除该计划吗？").then(() => {
    del(`/plan/manager/${row.plan_id}`).then((result) => {
      getPage(page.value.current);
      tip.success("删除计划成功！");
    });
  });
};

const execMultiDel = () => {
  if (multipleSelection.value.length == 0) {
    tip.error("请选择计划数据！");
    return;
  }
  elConfirm("提示", "您确定删除选中的计划吗？").then(() => {
    const ids = [];
    multipleSelection.value.forEach((row) => ids.push(row.plan_id));
    del(`/plan/manager`, ids).then((result) => {
      getPage(page.value.current);
      tip.success("删除计划成功！");
    });
  });
};

//下达
const execConfirm = (row) => {
  put(
    `/plan/manager/confirm/${row.plan_id}`,
    {},
    { title: "提示", message: "您确定下达该计划吗？" }
  ).then((result) => {
    getPage(page.value.current);
    tip.success("下达计划成功！");
  });
};

//查看详情
import PlanDetails from "./plan-details.vue";
const planDetailsRef = ref();
const openDetails = (row) => {
  planDetailsRef.value.open(row);
};
</script>

<style scoped>
.x {
}

.slide-fade-enter-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-leave-active {
  /* transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); */
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(300px);
  opacity: 0;
}
</style>